<template>
    <div class="container">
      <!-- <div class="sidebar">  
        <el-input placeholder="请输入关键字搜索" v-model="searchKey" />  
        <el-tree :data="treeData" :props="defaultProps" class="letree"></el-tree>  
      </div>   -->
      <div class="main">
        <div class="header">
          <el-button type="primary" @click="add">新建</el-button>
          <el-button type="success" @click="importData">导入</el-button>
          <el-button type="warning" @click="edit">编辑</el-button>
          <el-select v-model="selectedFilter" placeholder="请选择状态" style="width: 200px;">
            <el-option label="启用" value="enabled"></el-option>
            <el-option label="禁用" value="disabled"></el-option>
          </el-select>
          <el-input placeholder="请输入关键字搜索" v-model="searchTable" style="width: 200px;" />
          <el-button type="info" @click="query">查询</el-button>
          <el-button type="info" @click="reste">重置</el-button>
        </div>
        <el-table :data="tableData" border class="eltable">
          <el-table-column prop="ck_id" label="序号" width="100"></el-table-column>
          <el-table-column prop="ck_name" label="仓库名称"></el-table-column>
          <el-table-column prop="ck_code" label="仓库编码"></el-table-column>
          <el-table-column prop="ck_kx" label="仓库类型">
            <template #default="{ row }">
              <span v-if="row.ck_kx === 1">原材料仓库</span>
              <span v-else-if="row.ck_kx === 2">成品仓库</span>
            </template>
          </el-table-column>
          <el-table-column prop="cl_dz" label="位置"></el-table-column>
          <el-table-column prop="ck_mj" label="面积"></el-table-column>
          <el-table-column prop="ck_fzr" label="负责人"></el-table-column>
          <el-table-column prop="bz" label="备注"></el-table-column>
          <el-table-column prop="ck_zt" label="启用" width="120">
            <template #default="{ row }">
              <el-switch v-model="row.ck_zt" active-text="是" inactive-text="否"
                @change="handleSwitchChange(row)"></el-switch>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="120">
            <template #default="{ row }">
              <el-button type="text" @click="editRow(row)">编辑</el-button>
              <el-button type="text" @click="deleteRow(row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination @current-change="handleCurrentChange" :current-page="currentPage" :page-size="pageSize"
          :total="totalItems" layout="total, prev, pager, next, jumper">
        </el-pagination>
      </div>
    </div>

    <el-dialog v-model="dialogVisible" title="添加仓库" width="800" :before-close="handleClose">
      <el-form :model="form" class="demo-form-inline" :rules="rules" ref="formRef">
        <el-row :gutter="20">

          <el-col :span="12">
            <el-form-item label="仓库名称" :label-width="formLabelWidth" prop="ck_name">
              <el-input v-model="form.ck_name" placeholder="请输入仓库名称" clearable></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="仓库类型" :label-width="formLabelWidth" prop="ck_kx">
              <el-select v-model="form.ck_kx" placeholder="请选择仓库类型">
                <el-option label="原材料仓库" :value="1"></el-option>
                <el-option label="成品仓库" :value="2"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">

          <el-col :span="12">
            <el-form-item label="所在位置" :label-width="formLabelWidth" prop="cl_dz">
              <el-input v-model="form.cl_dz" placeholder="请输入仓库位置" clearable></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="面积" :label-width="formLabelWidth" prop="ck_mj">
              <el-input v-model="form.ck_mj" placeholder="请输入仓库面积" type="number" clearable></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">

          <el-col :span="12">
            <el-form-item label="负责人" :label-width="formLabelWidth" prop="ck_fzr">
              <!-- <el-select v-model="form.ck_fzr" placeholder="请选择仓库负责人">
            <el-option v-for="person in responsiblePersons" :key="person.id" :label="person.name" :value="person.id"></el-option>
          </el-select> -->
              <el-input v-model="form.ck_fzr" placeholder="请选择仓库负责人" clearable></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="24">
            <el-form-item label="备注" :label-width="formLabelWidth" prop="bz">
              <el-input v-model="form.bz" placeholder="请输入备注" type="textarea" :rows="3"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>

      <div class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitForm">确 定</el-button>
      </div>
    </el-dialog>
    <el-dialog v-model="dialogVisible1" title="修改仓库" width="800" :before-close="handleClose">
      <el-form :model="form1" class="demo-form-inline" :rules="rules" ref="formRef">
        <el-row :gutter="20">

          <el-col :span="12">
            <el-form-item label="仓库名称" :label-width="formLabelWidth" prop="ck_name">
              <el-input v-model="form1.ck_name" placeholder="请输入仓库名称" clearable></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="仓库类型" :label-width="formLabelWidth" prop="ck_kx">
              <el-select v-model="form1.ck_kx" placeholder="请选择仓库类型">
                <el-option label="原材料仓库" :value="1"></el-option>
                <el-option label="成品仓库" :value="2"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">

          <el-col :span="12">
            <el-form-item label="所在位置" :label-width="formLabelWidth" prop="cl_dz">
              <el-input v-model="form1.cl_dz" placeholder="请输入仓库位置" clearable></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="面积" :label-width="formLabelWidth" prop="ck_mj">
              <el-input v-model="form1.ck_mj" placeholder="请输入仓库面积" type="number" clearable></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">

          <el-col :span="12">
            <el-form-item label="负责人" :label-width="formLabelWidth" prop="ck_fzr">
              <!-- <el-select v-model="form.ck_fzr" placeholder="请选择仓库负责人">
            <el-option v-for="person in responsiblePersons" :key="person.id" :label="person.name" :value="person.id"></el-option>
          </el-select> -->
              <el-input v-model="form1.ck_fzr" placeholder="请选择仓库负责人" clearable></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="24">
            <el-form-item label="备注" :label-width="formLabelWidth" prop="bz">
              <el-input v-model="form1.bz" placeholder="请输入备注" type="textarea" :rows="3"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>

      <div class="dialog-footer">
        <el-button @click="dialogVisible1 = false">取 消</el-button>
        <el-button type="primary" @click="upqr">确 定</el-button>
      </div>
    </el-dialog>
  </template>

<script>
import axios from 'axios';
import { ref } from 'vue';

export default {
  setup() {
    const userId = localStorage.getItem('userId');
    console.log(userId);
    const searchKey = ref('');
    const treeData = ref([]);
    const defaultProps = {
      children: 'children',
      label: 'label',
    };

    const tableData = ref([]);

    const selectedFilter = ref('');
    const searchTable = ref('');
    const currentPage = ref(1);
    const pageSize = ref(5);
    const totalItems = ref(0);
    const dialogVisible = ref(false);
    const dialogVisible1 = ref(false);
    const form = ref({
      ck_code: '',
      ck_name: '',
      ck_kx: '',
      cl_dz: '',
      ck_mj: '',
      ck_fzr: '',
      bz: ''
    });
    const form1 = ref({
      ck_id: '',
      ck_code: '',
      ck_name: '',
      ck_kx: '',
      cl_dz: '',
      ck_mj: '',
      ck_fzr: '',
      bz: '',

    });
    function qk() {

    }

    function sx() {
      axios.get('/api/Wbd_ck/GetFYwbd_Ck?PageNumber=' + currentPage.value + '&PageSize=' + pageSize.value)
        .then(response => {
          console.log(response.data);
          if (response.data) {
            totalItems.value = response.data.zon;
            tableData.value = response.data.wbd_Cks.map(item => (
              {
                ...item,
                ck_zt: item.ck_zt === 1, // 1 -> true, 0 -> false
              }
            ))
          }
        })
    }
    sx();
    const add = () => {
      qk();
      // 添加逻辑  
      dialogVisible.value = true;

    };
    const submitForm = async () => {
      const formData = {
        ck_name: form.value.ck_name,
        ck_kx: form.value.ck_kx,
        cl_dz: form.value.cl_dz,
        ck_mj: form.value.ck_mj,
        ck_fzr: form.value.ck_fzr,
        bz: form.value.bz,
        create_by: userId,
      }
      console.log(formData);
      try {
        const response = await axios.post('/api/Wbd_ck/AddWbd_Ck', formData);
        if (response.data) {
           ElMessage.error("增加成功");
          sx();
          dialogVisible.value = false;

        }
      } catch (error) {
        console.error("请求错误:", error);
      }
    };
    const upqr = async () => {
      const formData = {
        ck_id: form1.value.ck_id,
        ck_code: form1.value.ck_code,
        ck_name: form1.value.ck_name,
        ck_kx: form1.value.ck_kx,
        cl_dz: form1.value.cl_dz,
        ck_mj: form1.value.ck_mj,
        ck_fzr: form1.value.ck_fzr,
        bz: form1.value.bz,
        update_by: userId,
      }
      console.log(formData);
      try {
        const response = await axios.put('/api/Wbd_ck/UpdateWbd_Ck', formData);
        if (response.data) {
           ElMessage.error("修改成功");
          sx();
          dialogVisible1.value = false;

        }
      } catch (error) {
        console.error("请求错误:", error);
      }

    };
    const handleSwitchChange = (row) => {
      const newStatus = row.ck_zt ? 1 : 0;
      console.log(newStatus);
      axios.put(`/api/Wbd_ck/UpZt?id=${row.ck_id}&zt=${newStatus}`)
        .then(response => {
          console.log('状态更新成功:', response);

        })
        .catch(error => {
          // 如果更新失败，你可能需要重置开关的状态  
          /// 还原状态  
        })
    }
    const edit = () => {
      // 编辑逻辑 
    };

    const importData = () => {
      // 导入逻辑  
    };

    const query = async () => {
      // 查询逻辑  
      console.log(searchTable.value);
      const zt = selectedFilter.value === 'enabled' ? 1 : selectedFilter.value === "disabled" ? 0 : '';
      console.log(zt);
      try{
        const response = await axios.get('/api/Wbd_ck/MHCX?PageNumber=' + currentPage.value + '&PageSize=' + pageSize.value + '&zt=' + zt + '&name=' +searchTable.value )
        if (response.data) {
          totalItems.value = response.data.zon;
          tableData.value = response.data.wbd_Cks.map(item => (
            {
              ...item,
              ck_zt: item.ck_zt === 1, // 1 -> true, 0 -> false
            }
          ))
        }
      }catch(error){  
        console.error('错误:', error);  
      }
    };
    const reste = () => {
      selectedFilter.value = '';
      searchTable.value = '';
    }
    const editRow = (row) => {
      // 编辑行逻辑  
      dialogVisible1.value = true;
      form1.value = row;
      console.log('Editing row:', row);
    };

    const deleteRow = (row) => {
      // 删除行逻辑  
      console.log('Deleting row:', row.ck_id);
      if (confirm('确定要删除吗？')) {
        axios.put('/api/Wbd_ck/UpIsDel?id=' + row.ck_id)
          .then(function (response) {
            if (response.data) {
               ElMessage.error("删除成功");
              sx();
            }
          }).catch(function (error) {
            console.error('错误:', error);
          })
      }
    };

    const handleCurrentChange = (page) => {

    };

    // 确保所有函数都被返回  
    return {
      searchKey,
      treeData,
      defaultProps,
      tableData,
      selectedFilter,
      searchTable,
      currentPage,
      pageSize,
      totalItems,
      add,
      edit,
      importData,
      query,
      editRow,
      deleteRow,
      handleCurrentChange,
      dialogVisible,
      dialogVisible1,
      form,
      submitForm,
      upqr,
      userId,
      handleSwitchChange,
      reste,
      form1
    };
  },
};
</script>

<style>
.container {
  display: flex;
  gap: 20px;
  height: 87vh;
}

.sidebar {
  height: 100%;
  width: 30vh;
}

.main {
  width: 80%;
  flex: 1;
  height: 100%;
}

.header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 20px;
}

.eltable {
  height: 90%;
}

.letree {
  height: 97%;
}
</style>
